<template>
  <div :class="['login', { isFocus }]" @click="openCard()" @contextmenu.prevent="">
    <img src="../assets/user-filling.png" alt="" />
  </div>
  <Transition>
    <ul class="user" v-if="card" @contextmenu.prevent="">
      <li class="item" @click="toLogin()">登录</li>
      <li class="item">登出</li>
    </ul>
  </Transition>
</template>

<script setup>
import { useStore } from "../store"; // 引入pinia
import { ref, computed, reactive, watch } from "vue";
// 路由
import { useRouter } from "vue-router";
const router = useRouter(); //定义路由
const store = useStore();
const isFocus = computed(() => {
  return store.user.focus;
});

// const card = ref(false)
const card = computed(() => {
  return store.user.loginCard
})
const toLogin = () => {
  router.push("/user");
}
const openCard = () => {
  // 如果显示
  const isShow = store.getdata("loginCard")
  if (isShow) {
    // 则关闭
    store.setdata("loginCard", false)
  } else {
    // 否则打开
    store.setdata("loginCard", true)
  }
}
</script>

<style lang="scss" scoped>
.login {
  @apply w-6 h-6 transition-all fixed top-8 right-16 opacity-30 hover: opacity-70;
}

.isFocus {
  @apply opacity-70;
}

.user {
  @apply transition-all fixed top-18 overflow-hidden right-11 rounded-lg bg-light-500 text-dark-400 absolute;
}

.item {
  @apply w-full p-3 hover: bg-light-900 transition-all;
  font-size: 14px;
}

.dark .item {
  @apply w-full p-3 hover: bg-dark-900 transition-all;
  font-size: 14px;
}

.dark .user {
  @apply bg-dark-500 text-light-500;
}


.v-enter-active,
.v-leave-active {
  transition: all 0.25s;
}

.v-enter-from,
.v-leave-to {
  transform: scaleX(0);
}
</style>
